import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Modal, Steps, Form, Input, Row, Col, Radio, Button, Divider } from 'antd';

import UploadInput from '@/components/UploadInput';
import EditorInput from '@/components/EditorInput';

const LegalAffairsAddModal = ({ dispatch, actionRef, loading }) => {
  const [form] = Form.useForm();
  const [stepCurrent, setCurrent] = useState(0);
  const [informationId, setInformationId] = useState('');
  const [LegalAffairsAddModalVisible, setLegalAffairsAddModalVisible] = useState(false);

  const showModal = id => {
    form.resetFields();
    if (id) {
      setCurrent(1);
      setInformationId(id);
      getInfoOpenDetail(id);
    }
    setLegalAffairsAddModalVisible(true);
  };

  const getInfoOpenDetail = id => {
    new Promise(resolve => {
      dispatch({
        type: 'informationOpen/getArrairOpenDetail',
        payload: { id },
        resolve,
      });
    }).then(data => {
      const fields = {
        ...data,

        media: data.media && [
          {
            url: data.media.url,
            uid: data.media.id,
            name: data.media.name,
            status: 'done',
          },
        ],
      };

      form.setFieldsValue(fields);
    });
  };

  useEffect(() => {
    if (actionRef && typeof actionRef === 'function') {
      actionRef({ showModal });
    }
    if (actionRef && typeof actionRef !== 'function') {
      actionRef.current = { showModal };
    }
  }, []);

  const hideModal = () => {
    setLegalAffairsAddModalVisible(false);
    changeCurrent(0);
    setInformationId('');
    form.resetFields();
  };

  const handleOk = () => {
    // const attachmentInfo = [];
    // form.getFieldValue(['attachment']) &&
    //   form.getFieldValue(['attachment']).map(item => attachmentInfo.push(item.uid));
    new Promise(resolve => {
      dispatch({
        type: `informationOpen/${informationId ? 'updateArrairOpen' : 'addArrairOpen'}`,
        payload: {
          ...form.getFieldsValue([
            'address',
            'title',
            'contact',
            'policyGuideDisplay',
            'announcementDisplay',
            'internationalNewsDisplay',
            'legalDynamicDisplay',
            'introduction',
          ]),
          media: form.getFieldValue(['media']) && form.getFieldValue(['media'])[0].uid,
          id: informationId,
        },
        resolve,
      });
    })
      .then(() => {
        hideModal();
      })
      .catch();
  };
  const steps = [
    {
      title: '完善基本信息',
      effect: 'updateBasicInfo',
    },
    {
      title: '编辑正文',
      effect: 'updateText',
    },
    {
      title: '预览和提交',
      effect: 'previewAndSubmit',
    },
  ];
  const changeCurrent = index => {
    form.validateFields().then(_ => {
      setCurrent(index);
    });
  };

  return (
    <Modal
      title="创建新法务区简介"
      centered
      width="95vw"
      style={{ paddingBottom: 0 }}
      bodyStyle={{
        height: 'calc(95vh - 108px)',
        overflow: 'auto',
      }}
      visible={LegalAffairsAddModalVisible}
      forceRender
      footer={[
        stepCurrent === 2 && (
          <Button key="cancel" onClick={hideModal}>
            退出
          </Button>
        ),

        stepCurrent === 2 && (
          <Button key="pre" onClick={() => changeCurrent(stepCurrent - 1)}>
            返回编辑
          </Button>
        ),
        stepCurrent === 0 && (
          <Button key="next" onClick={() => changeCurrent(stepCurrent + 1)}>
            下一步
          </Button>
        ),
        stepCurrent === 1 && (
          <Button key="next" onClick={() => changeCurrent(stepCurrent + 1)}>
            预览并发布
          </Button>
        ),
        stepCurrent === 2 && (
          <Button key="submit" type="primary" loading={loading} onClick={handleOk}>
            发布
          </Button>
        ),
      ]}
      maskClosable={false}
      destroyOnClose
      onCancel={hideModal}
    >
      <Steps current={stepCurrent}>
        {steps.map(item => (
          <Steps.Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div
        style={{
          height: 'calc(100% - 36px)',
          padding: '20px 0',
          overflowX: 'hidden',
          boxSizing: 'border-box',
        }}
      >
        <div>
          <Form name="info" layout="vertical" form={form}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              {stepCurrent === 0 && (
                <div style={{ width: '33.3%', minWidth: 450 }}>
                  <Form.Item
                    label="标题"
                    name="title"
                    rules={[{ required: true, message: '请输入标题!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="联系地址"
                    name="address"
                    rules={[{ required: true, message: '请输入联系地址!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="联系方式"
                    name="contact"
                    rules={[{ required: true, message: '请输入联系方式!' }]}
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label="宣传视频/图片"
                    name="media"
                    rules={[{ required: true, message: '请上传视频/图片!' }]}
                  >
                    <UploadInput type="upload" />
                  </Form.Item>

                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示政策指南"
                        name="policyGuideDisplay"
                        rules={[{ required: true, message: '请选择是否展示政策指南!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示法务动态"
                        name="legalDynamicDisplay"
                        rules={[{ required: true, message: '请选择是否展示法务动态!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示国际要闻"
                        name="internationalNewsDisplay"
                        rules={[{ required: true, message: '请选择是否展示国际要闻!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示通知公告"
                        name="announcementDisplay"
                        rules={[{ required: true, message: '请选择是否展示通知公告!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              )}
            </div>
            {stepCurrent === 1 && (
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <div style={{ width: '60%', minWidth: 850, maxWidth: 850 }}>
                  <Row>
                    <Col span="24">
                      <Form.Item label="标题" name="title">
                        <Input />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item label="联系地址" name="address">
                        <Input />
                      </Form.Item>
                    </Col>
                    <Col span="11" offset="2">
                      <Form.Item
                        label="联系方式"
                        name="contact"
                        rules={[{ required: true, message: '请输入联系方式!' }]}
                      >
                        <Input />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <Form.Item name="introduction">
                        <EditorInput />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Divider />
                  <Row>
                    <Col span="24">
                      <Form.Item label="宣传视频/图片" name="media">
                        <UploadInput type="upload" />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示政策指南"
                        name="policyGuideDisplay"
                        rules={[{ required: true, message: '请选择是否展示政策指南!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>

                    <Col span="11">
                      <Form.Item
                        label="是否展示法务动态"
                        name="legalDynamicDisplay"
                        rules={[{ required: true, message: '请选择是否展示法务动态!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="11">
                      <Form.Item
                        label="是否展示国际要闻"
                        name="internationalNewsDisplay"
                        rules={[{ required: true, message: '请选择是否展示国际要闻!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>

                    <Col span="11">
                      <Form.Item
                        label="是否展示通知公告"
                        name="announcementDisplay"
                        rules={[{ required: true, message: '请选择是否是否展示通知公告!' }]}
                      >
                        <Radio.Group>
                          <Radio value="YES">是</Radio>
                          <Radio value="NO">否</Radio>
                        </Radio.Group>
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              </div>
            )}

            {stepCurrent === 2 && <>预览</>}
          </Form>
        </div>
      </div>
    </Modal>
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['informationOpen/addCares'],
}))(LegalAffairsAddModal);
